<template>
  <div class="device-controls">
    <button :class="{ active: activeDevice === '联醇装置' }" @click="selectDevice('联醇装置')">
      联醇装置
    </button>
    <button
      :class="{ active: activeDevice === '解吸浓缩系统装置' }"
      @click="selectDevice('解吸浓缩系统装置')"
    >
      解吸浓缩系统装置
    </button>

    <button @click="clearAndStartMonitor" class="control-button">清空数据并开始模拟</button>
  </div>
</template>

<script setup>
import { ref, defineEmits, onMounted } from 'vue'

const emit = defineEmits(['switch-device'])
const activeDevice = ref('联醇装置') // 默认选中

const selectDevice = (device) => {
  activeDevice.value = device
  emit('switch-device', device)
}

// 新增的点击事件处理器
const clearAndStartMonitor = async () => {
  try {
    // 调用后端 /clear 接口，使用 GET 方法，不传递参数
    const clearResponse = await fetch('/api/clear', {
      method: 'GET', // 明确指定为 GET 方法
      // GET 请求通常不需要 headers 和 body
    })

    if (!clearResponse.ok) {
      throw new Error(`清空数据失败: ${clearResponse.statusText}`)
    }
    console.log('数据已清空。')

    // 调用后端 /start_monitor 接口，使用 GET 方法，不传递参数
    const startMonitorResponse = await fetch('/api/start_monitor', {
      method: 'GET', // 明确指定为 GET 方法
      // GET 请求通常不需要 headers 和 body
    })

    if (!startMonitorResponse.ok) {
      throw new Error(`开始模拟失败: ${startMonitorResponse.statusText}`)
    }
    console.log('模拟已开始。')

    alert('数据已清空并开始模拟！')
    // 可以在这里触发一个事件，通知父组件（AnomalyDetectionView）
    // 重新加载数据，例如：emit('data-reset');
  } catch (error) {
    console.error('操作失败:', error)
    alert(`操作失败: ${error.message}`)
  }
}

onMounted(() => {
  emit('switch-device', activeDevice.value)
})
</script>

<style scoped>
.device-controls {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.device-controls button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.device-controls button:hover {
  background-color: #45a049;
}

.device-controls button.active {
  background-color: #3f51b5;
}

/* 为新的控制按钮添加样式，使其与设备切换按钮区分开 */
.device-controls .control-button {
  background-color: #ff9800; /* 示例颜色：橙色 */
}

.device-controls .control-button:hover {
  background-color: #fb8c00; /* 鼠标悬停时的颜色 */
}
</style>
